<template>
	<cl-page>
		<view class="page-home">
			<view class="page-header">
				<view class="page-header-img">
					<image src="https://www.inktok.com/_next/image?url=%2Fimages%2Fapp%2Ficon-good.png&w=48&q=75"
						alt="烟花" />
				</view>
				<view class="page-header-title">
					Hey,今天,你想创作什么内容？
				</view>
				<view class="page-header-tips">
					从下面的选项中选择内容类型。
				</view>
			</view>
			<view class="page-search p-10">
				<cl-search v-model="seacherValue" placeholder="搜索图片、文章、链接" @search="searchList" :show-search-button="true" />
			</view>
			<view class="page-tabs" :style="'top:'+(menuButtonInfo.top-8)+'px'">
				<view class="p-30">
					<view class="page-tabs-list" :class="item.id == active ? 'page-tabs-active' : ''"
						v-for="(item, index) in tags" :key="index" @click="changeActive(item.id)">{{ item.tagName }}</view>
				</view>
			</view>
			<view class="page-content p-30">
				<view class="page-content-title" v-if="seacherValue == ''">{{ tags.find(item => item.id == active)?tags.find(item => item.id == active).tagName:''
				}}</view>
				<view class="page-content-search" v-else>{{ 'Search results for “' + seacherValue + '”' }}</view>
				<view class="page-content-item" v-if="functionList.length>0">
					<view class="page-content-list" v-for="(item, index) in functionList" :key="index" @click="jumpTopIc(item)">
						<view class="page-content-img">
							<img :src="item.functionImage" alt="">
						</view>
						<view class="page-content-right">
							<view class="page-content-title">{{ item.functionName }}</view>
							<view class="page-content-tips">{{ item.functionDesc }}</view>
						</view>
					</view>
				</view>
				<view v-else>
					
				</view>
			</view>
		</view>
		<tabbar />
	</cl-page>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";

import { onReady, onLoad ,onShareAppMessage,onShow} from "@dcloudio/uni-app";
import { usePager, useCool } from "/@/cool";
import Tabbar from "./components/tabbar.vue";
const { router, service } = useCool();
const seacherValue = ref("")
let active = ref<number>(0);

const tags = ref<any[]>([]);
const list = ref<any[]>([]);
const functionList = ref<any[]>([])
function changeActive(res: number) {
	active.value = res
	if (res == 0) {
		functionList.value = list.value
	} else {
		functionList.value = list.value.filter(item => item.functionTag == res)
	}
}
function getTagsList() {
	service.inktok.tag.list().then(res => {
		res.unshift({
			tagName: "所有",
			id: 0
		})
		tags.value = res
	})
}
function jumpTopIc(item:any){
	if(item.functionCode=='ChatBotCard'){
		router.push("/pages/index/chat");
	}else{
		router.push("/pages/index/topic/topic?id="+item.id);
	}
}
function getFunctionList() {
	service.inktok.function.list().then(res => {
		list.value = res
		changeActive(0)
	})
}
function searchList(res:any){
	seacherValue.value=res
	if(res){
		if(active.value==0){
			functionList.value = list.value.filter(item => item.functionName.indexOf(res)!=-1)
		}else{
			functionList.value = list.value.filter(item => item.functionTag == active.value&&item.functionName.indexOf(res)!=-1)
		}
	}else{
		functionList.value = list.value
	}
	
}
const menuButtonInfo=ref({
	top:0
})
onLoad(() => {
	
		console.log(service)
	menuButtonInfo.value= uni.getMenuButtonBoundingClientRect()
	getTagsList()
	getFunctionList()
})
onShow(()=>{
	if(tags.value.length==0){
		getTagsList()
	}
	if(list.value.length==0){
			getFunctionList()
	}
})
onShareAppMessage(()=>{
	return{
		      path:"/pages/index/home",
		      title:"闯堂兔",
		imageUrl:"/static/share.jpg"
	}
})
</script>

<style lang="scss" scoped>
.page-home {
	margin-top: 70rpx;
	.page-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 2rem;

		.page-header-img {
			width: 48rpx;
			height: 48rpx;
		}

		.page-header-img>image {
			width: 100%;
			height: 100%;
		}

		.page-header-title {
			color: rgb(17, 20, 45);
			margin: 10rpx 0;
			font-weight: 800;
			font-size: 36rpx;
		}

		.page-header-tips {
			font-size: 24rpx;
			font-weight: 400;
			color: rgb(65, 67, 87)
		}
	}

	.page-search {
		margin-bottom: -20rpx;
	}

	.page-tabs {
		white-space: nowrap;
		overflow-x: auto;
		padding: 84rpx 0 32rpx;
		position: sticky;
		background: rgb(250, 249, 249);

		.page-tabs-list {
			border: 1px solid rgb(231, 231, 234);
			border-radius: 9999rpx;
			display: inline-flex;
			margin: 0 0.5rem;
			color: rgb(112, 114, 129);
			font-weight: 600;
			font-size: .875rem;
			padding: 0.25rem 1rem;
		}

		.page-tabs-list:nth-child(1) {
			margin-left: 0;
		}

		.page-tabs-active {
			background: $cl-color-primary;
			color: #fff;
		}
	}

	.page-content {
		.page-content-search {
			color: rgb(112 114 129);
			font-weight: 600;
			font-size: 1rem;
			text-align: center;
			margin-bottom: 1rem;
		}

		.page-content-title {
			color: rgb(17 20 45/var(--tw-text-opacity));
			font-weight: 700;
			font-size: 1rem;
			margin-bottom: 1rem;
		}

		.page-content-item {
			
			.page-content-list {
				display: flex;
				align-items: center;
				box-shadow: 0 8rpx 12rpx -2rpx $-tw-shadow-color, 0 4rpx 8rpx -4rpx $-tw-shadow-color;
				background-color: rgb(255 255 255);
				height: 168rpx;
				border-radius: 0.625rem;
				border: 1rpx solid #e5e7eb;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				padding:0 1rem;
				.page-content-img {
					width: 60rpx;
					height: 60rpx;

					image {
						width: 100%;
						height: 100%
					}
				}

				.page-content-right {
					flex: 1;
					margin-left: 30rpx;

					.page-content-title {
						color: rgb(17, 20, 45);
						font-weight: 700;
						font-size: .875rem;
						margin-bottom: 0.625rem;
					}

					.page-content-tips {
						font-size: 12px;
						font-weight: 500;
						color: rgb(112 114 129);
					}
				}
			}
		}
	}
}
</style>
